<template>
    <div class="project-create-container">
        <div>
            <h2 class="mb-4">创建新项目</h2>
            <el-form :model="projectForm" :rules="rules" ref="formRef" label-width="120px">

                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="projectForm.projectName" placeholder="请输入项目名称"></el-input>
                </el-form-item>

                <el-form-item label="项目描述" prop="description">
                    <el-input type="textarea" v-model="projectForm.description" :rows="4" placeholder="请输入项目描述"></el-input>
                </el-form-item>

                <el-form-item label="项目类型" prop="property">
                    <el-radio-group v-model="projectForm.property">
                        <el-radio label="PERSONAL">个人项目</el-radio>
                        <el-radio label="ORGANIZATION">组织项目</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="可见性" prop="visibility">
                    <el-radio-group v-model="projectForm.visibility">
                        <el-radio label="PUBLIC">公开</el-radio>
                        <el-radio label="PRIVATE">私有</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="项目路径" prop="path">
                    <el-input v-model="projectForm.path" placeholder="请输入项目存储路径"></el-input>
                </el-form-item>

                <el-form-item label="项目分类" prop="category">
<!--                    <span style="cursor: pointer" @click="handleCategoryOpen"><img src="@/assets/icon_svg/分类.svg" alt="icon" style="width: 22px; height: 22px"></span>-->
                    <div class="category-tag">
                        <el-tag
                            v-for="(category, index) in categories"
                            :key="index"
                            :class="{ active: selectedCategory === category.categoryId }"
                            @click="selectedCategory = category.categoryId"
                        >
                            {{ category.categoryName }}
                        </el-tag>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">创建项目</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from "@/utils/request.js";
// 初始化加载方法或数据
onMounted(() => {
    request.get('/api/cata/selectCateAll').then(res => {
        if (res.code === '200') {
            categories.value = res.data; // 缓存新数据
        } else {
            console.log("分类列表查询失败")
        }
    })
    selectedCategory.value = ''
});
const categories = ref([]); // 缓存所有分类信息
const selectedCategory = ref();  // 选择的分类


const router = useRouter()
const formRef = ref()

//获取本地存储中的用户信息
let user;
const loginUser = localStorage.getItem('code_user');
if (loginUser) {
    // 将拿到的Json数据转化为JavaScript对象
    user = JSON.parse(loginUser);
}
// 表单数据
const projectForm = reactive({
    userId: user.user_id,
    projectName: '',
    description: '',
    property: 'PERSONAL',
    visibility: 'PRIVATE',
    categoryId: selectedCategory.value,
    path: ''
})

// 表单验证规则
const rules = {
    projectName: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
        { min: 2, max: 50, message: '项目名称长度在2-50个字符之间', trigger: 'blur' }
    ],
    path: [
        { required: true, message: '请输入项目路径', trigger: 'blur' },
        {
            pattern: /^\/[a-zA-Z0-9]+(\/[a-zA-Z0-9]+)*$/,
            message: '路径只能包含英文、数字和斜杠、以及连续斜杠、且不能以斜杠结尾',
            trigger: 'blur'
        }
    ]
}

// 提交表单
const submitForm = async () => {



    try {
        await formRef.value.validate()
        projectForm.categoryId = selectedCategory.value
        console.log(projectForm)
        await request.post('/api/projects/createProject', projectForm).then(res => {
            if (res.code === '200') {
                ElMessage.success('项目创建成功')
                router.push({name: 'ProjectDetail', params: {id: res.data.projectId}})
            } else {
                ElMessage.error(res.msg)
            }
        })
    } catch (error) {
        ElMessage.error(error.message || '创建项目失败')
    }
}

// 取消
const cancel = () => {
    router.push({ name: 'ProjectList' })
}

</script>

<style scoped>
.project-create-container {
    padding: 30px 30px;
    background-color: #fffefb;
    margin: 0 auto;
    height: 100vh;
}


.category-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /*margin: 0 100px 0 30px;*/
    /*padding-top: 40px;*/
}

.category-tag .el-tag {
    padding: 5px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    height: 30px;
    font-size: 14px;
}
.category-tag .el-tag.active {
    color: #fffefb;
    background-color: #31bf00;
}

.active {
    color: #1677ff;
    border-bottom: solid #1677ff 3px;
}
</style>